<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>实例事件</title>
</head>
<body>
<h1>实例事件</h1>
<hr>
<div id="app">
    {{ num }}
    <p>
        <button @click="add(2)">add</button>

    </p>
</div>
<button onclick="reduce()">reduce</button>
<button onclick="reduceOnce()">reduceOnce</button>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            num: 1
        },
        methods: {
            add: function (num) {
                if (num != '') {
                    this.num += num
                } else {
                    this.num++
                }
            }
        }
    });
    app.$on('reduce', function () {
        console.log('执行了reduce方法');
        this.num--;
    });
    app.$once('reduceOnce', function () {
        console.log('执行了reduceOnce方法,之后不会再调用');
        this.num--;
    });
    function reduce() {
        app.$emit('reduce');
    }
    function reduceOnce() {
        app.$emit('reduceOnce');
    }
</script>
</body>
</html>